<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <p> num 的值是： {{ num }} </p>
        <p> 当前 num 是： {{ msg }} </p>
        <p> 计算属性中的值 {{message}}</p>
        <button @click="change"> 改变 num 值 </button>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                num: 0,
                msg: '偶数',
                name: '高举'
            }
        },
        // 计算属性选项，所有的计算属性都会放在这里
        computed: {
            message () {
                /*
                    当 this.num 的值发生改变时才会执行 message 函数进行计算
                    如果当前值和上一次的值相同，该方法一定是不会被执行的
                    也就相当于 this.num 被监听了，只有改变才会被触发
                    计算属性的特点：
                    1. 计算属性有缓存
                    2. 计算属性一上来就会立即执行一次
                    3. 如果计算属性中有使用到多个属性，那么这些属性全部都会被监听到
                    只要有一个发生改变那么该函数就会被执行
                    4. 计算属性中一定要有一个 return,因为要有一个计算的结果
                    5. 计算属性是多个值影响一个值
                */

                // 只要是被写在计算属性内的变量，都会被监听到
                console.log(this.name);
                console.log('计算属性被调用了');
                return this.num ? '奇数' : '偶数'
            }
        },
        methods: {
            change () {
                // console.log(Math.floor(Math.random() * 2));
                this.num = Math.floor(Math.random() * 2)
                // 调用方法来获取是奇数还是偶数
                this.showMsg()
            },
            showMsg () {
                // 用来判断是奇数还是偶数
                this.msg = this.num ? '奇数' : '偶数'

                console.log('函数被调用了');
            }
        },
    })

    const vm = app.mount('#app')

</script>

</html>